<template>
    <div>
        <div class="top">
            <el-input v-model="tableDataName" placeholder="请输入文章标题" style="width: 240px"></el-input>
            <el-button type="primary" @click="doFilter()">搜索</el-button>
            <el-button @click="doReset()">重置</el-button>
            <el-button @click="doadd()">新增</el-button>
            <div class="space">
                <el-table :data="tableDataEnd" border style="width: 100%">
                    <el-table-column prop="id" sortable label="序号" width="180" header-align="center" align="center">
                    </el-table-column>
                    <el-table-column prop="title" sortable label="文章标题" width="180" header-align="center"
                        align="center">
                    </el-table-column>
                    <el-table-column prop="articleIntroduction" sortable label="简介" header-align="center"
                        align="center">
                    </el-table-column>
                    <el-table-column prop="articleContent" sortable label="内容" header-align="center" align="center">
                    </el-table-column>
                    <el-table-column prop="CategoryName" sortable label="文章分类" header-align="center" align="center">
                    </el-table-column>
                    <el-table-column prop="isDeleted" sortable label="文章删除" header-align="center" align="center">
                    </el-table-column>
                    <el-table-column label="操作" header-align="center" align="center">
                        <template slot-scope="scope">
                            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button size="small" type="danger" @click="deleteRow(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="space">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage" :page-sizes="[1, 2, 3, 4]" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="totalItems">
                    </el-pagination>
                </div>
                <el-dialog title="用户信息" :visible.sync="dialogFormVisible">
                    <el-form :model="form">
                        <el-form-item label="id" :label-width="formLabelWidth">
                            <el-input v-model="form.id" disabled auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="文章标题" :label-width="formLabelWidth">
                            <el-input v-model="form.title" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="简介" :label-width="formLabelWidth">
                            <el-input v-model="form.articleIntroduction" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="内容" :label-width="formLabelWidth">
                            <el-input v-model="form.articleContent" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="文章分类" :label-width="formLabelWidth">
                            <el-radio v-model="form.CategoryName" label="HTML" border>HTML</el-radio>
                            <el-radio v-model="form.CategoryName" label=".NET Core" border>.NET Core</el-radio>
                            <el-radio v-model="form.CategoryName" label="C#" border>C#</el-radio>
                            <el-radio v-model="form.CategoryName" label="Vue" border>Vue</el-radio>
                            <el-radio v-model="form.CategoryName" label="Java" border>Java</el-radio>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="cancel">取 消</el-button>

                        <el-button type="primary" @click="update">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
import { GetList, Getbyid, UpdateArticle, DelArticle, ArticleAdd, ArticleGetPager, Getcategory } from '@/api/Blogslist.js';
export default {
    data() {
        return {
            dialogFormVisible: false,
            formLabelWidth: "80px",
            dialogVisible: false,
            dialogVisible1: false,
            form: {},
            tableDataBegin: [],
            tableDataName: "",
            tableDataEnd: [],
            currentPage: 1,
            pageSize: 4,
            totalItems: 10,
            filterTableDataEnd: [],
            flag: false,
        };
    },

    handleSelectionChange(val) {
        this.users.id = val;
        console.log("选中的数据集合为:", val);
    },
    created() { },
    mounted() {
        this.querry();
    },
    computed: {
        // 测试代码
        articleName() {
            let articleName = sessionStorage.getItem("ms_articleName");

            console.log(articleName);
            if (articleName !== "test") {
                alert("11");
            }
            return articleName ? articleName : this.name;
        },
    },
    methods: {
        querry() {
            GetList().then((res) => {
                var istable = []
                res.data.data.forEach((item) => {

                    if (item.isDeleted === true) {
                        item.isDeleted = "已删除"
                    } else {
                        item.isDeleted = "未删除"
                        console.log(item);
                    }
                    istable.push(item)
                });
                istable.forEach((item) => {
                    Getcategory(item.appArticleCategoryId).then(
                        (res) => {
                            this.$set(item, 'CategoryName', res.data.data.categoryName)
                        }
                    )
                })

                this.tableDataBegin = res.data.data;
                this.totalItems = istable.length;
                console.log(istable);
                console.log(this.tableDataBegin);
                this.totalItems = istable.length;
                if (this.totalItems > this.pageSize) {
                    for (let index = 0; index < this.pageSize; index++) {
                        this.tableDataEnd.push(istable[index]);
                        console.log(this.tableDataEnd);
                    }
                } else {
                    this.tableDataEnd = istable;
                }
            });
        },

        add() {
            this.form = {
                id: "",
                title: "",
                articleIntroduction: "",
                articleContent: "",
                CategoryName: "",
                userId: ""
            }
                ;

            this.dialogFormVisible = true;
        },
        update() {
            var that = this;
            UpdateArticle(that.form.id, {
                Title: that.form.title,
                articleIntroduction: that.form.articleIntroduction,
                appArticleContent: that.form.articleContent,
                CategoryName: that.form.CategoryName,
                userId: that.form.userId

            }).then(function (res) {
                console.log(res.data);
                if (res.data.Code == 1000) {
                    window.location.reload();
                    const loading = that.$loading({
                        lock: true,
                        text: "修改成功",
                        spinner: "el-icon-loading",
                        background: "rgba(0, 0, 0, 0.7)",
                    });
                    setTimeout(() => {
                        loading.close();
                    }, 1500);
                }
            }

            ).catch(function (err) {
                //请求失败
                console.log(err);
            })
            this.dialogFormVisible = false;
        },
        handleEdit(index) {
            this.form = this.tableDataEnd[index];
            this.currentIndex = index;
            // 设置对话框的可见
            this.dialogFormVisible = true;
        },
        handleDelete(id) {
            console.log(id);
            DelArticle(id).then(
                this.$confirm("永久删除该文件, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then((res) => {
                        window.location.reload();
                        if (res.code === 1000) {
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                            if (res.code === 2000) {
                                console.log("删除失败");
                                this.$loading({
                                    type: "error",
                                    message: "删除失败!"
                                })
                            }
                            window.location.reload();
                        }
                    })
            );
            // 设置类似于console类型的功能
        },
        load() {
            var loading = this.$loading({
                lock: true,
                text: "等待跳转",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            // 在注册界面停留两秒钟跳转登录界
            setTimeout(() => {
                loading.close();

                this.querry();
                // res.end()
            }, 3000);
        },
        doadd() {
            this.$router.push("/articleEdit")
        },
        deleteRow(id) {
            console.log(id);
            if (confirm("确定要删除吗") == true) {

                DelArticle(id).then((res) => {
                    window.location.reload();
                    if (res.code === 1000) {
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                    }
                })
            }
        },
        cancel() {
            // 取消的时候直接设置对话框不可见即可
            this.dialogFormVisible = false;
        },
        doReset() {
            this.tableDataEnd = [];
            this.tableDataName = "";
            this.filterTableDataEnd = [];
            this.tableDataBegin.forEach((value) => {
                if (value.title) {
                    if (value.title.indexOf(this.title) >= 0) {
                        this.filterTableDataEnd.push(value);
                        console.log(value);
                    }
                }
            });

            this.tableDataName = "";
            this.currentPage = 1;
            this.totalItems = this.filterTableDataEnd.length;
            this.querry();
        },

        doFilter() {//过滤，前端完成
            if (this.tableDataName == "") {
                this.$message.warning("查询条件不能为空！");
                this.tableDataName = "";
                return;
            }
            console.log(this.tableDataBegin);
            this.tableDataEnd = [];

            this.filterTableDataEnd = [];
            this.tableDataBegin.forEach((value) => {
                if (value.title) {
                    if (value.title.indexOf(this.tableDataName) >= 0) {
                        console.log(value.title);
                        this.filterTableDataEnd.push(value);
                    }
                }
            });

            this.tableDataName = "";
            this.currentPage = 1;
            this.totalItems = this.filterTableDataEnd.length;
            //渲染表格,根据值
            this.currentChangePage(this.filterTableDataEnd);

            this.flag = true;
        },

        //每页展示条数
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.handleCurrentChange(1);
        },

        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
            //需要判断是否检索
            if (!this.flag) {
                this.currentChangePage(this.tableDataBegin);
                console.log(this.tableDataEnd);
            } else {
                this.currentChangePage(this.filterTableDataEnd);
                console.log(this.tableDataEnd);
            }
        }, //组件自带监控当前页码

        //点击下一页
        currentChangePage(list) {
            let from = (this.currentPage - 1) * this.pageSize;
            let to = this.currentPage * this.pageSize;
            this.tableDataEnd = [];
            for (; from < to; from++) {
                if (list[from]) {
                    this.tableDataEnd.push(list[from]);
                }
            }
        },
    },
};
</script>

<style  scoped>
.manage-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.manage-header .addUser {
    height: 40px;
}
</style>>
